<template>
  <div class="innerPageTable-box-OneTwo innerPageTable-out-flex">
     <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="modelForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="procinstName" :label="$t('module.launchApp.processTitle')">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.procinstName"
            placeholder
            
            @on-enter="search"
          ></Input>
        </Form-item>
        <Form-item prop="taskName" :label="$t('module.launchApp.taskName')">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.taskName"
            placeholder
            
            @on-enter="search"
          ></Input>
        </Form-item>
        <Form-item prop="isRead" :label="$t('module.launchApp.isRead')">
          <Select v-model="searchForm.isRead">
            <Option
              v-for="item in isReadList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item prop="button" class="search-solt-btn">
           <RPButton optType="search" @click="search" />
           <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="tobeReadListTable" :config="tableConfig">
    </InnerPageTable>
  </div>
</template>

<script>
import { queryToBeReadPageList, updateToReaded } from '@api/flowable/readPass.js'
import { tobeReadColumns } from './columns.js'
import IframeContainer from '@/components/IframeContainer.vue'

export default {
  name: 'tobe-read',
  components: { IframeContainer },
  data() {
    return {
      searchForm: {
        taskName: '',
        procinstName: '',
        isRead: 2
      },
      tableConfig: {
        loadDataFn: ({ responseProcess, param }) => {
          // 处理isRead为空值，解决iview的Select组件中value为字符串类型偶尔选不上的bug
          if (param.isRead && param.isRead === 2) {
            param.isRead = ''
          }
          queryToBeReadPageList(param).then(({ data }) => {
            const finalData = {}
            finalData.currentPage = data.data.pageNum
            finalData.recordCount = data.data.total
            data.data.list.map(item => {
              if (!item.procinstEndTime) {
                item.status = this.$t('module.launchApp.inProgress')
              } else {
                item.status = this.$t('module.launchApp.done')
              }
            })
            finalData.recordList = data.data.list
            responseProcess(finalData)
          })
        },
        columnsFn: tobeReadColumns.bind(this),
        autoFirst: true,
        loading: false,
        initParam: { state: 1 }
      },
      isReadList: [
        {
          label: this.$t('module.launchApp.all'),
          value: 2
        },
        {
          label: this.$t('module.launchApp.yes'),
          value: 1
        },
        {
          label: this.$t('module.launchApp.no'),
          value: 0
        }
      ]
    }
  },
  methods: {
    openDetail(row) {
      let vm = this
      new this.$pageModal(
        IframeContainer,
        {
          attrs: {
            src: '/static/task/workflow/#/pass-detail/' + row.taskId,
            width: 900,
            height: 700
          }
        },
        res => {
          vm.updateToReaded(row)
          res && vm.search()
        }
      )
    },
    search() {
      //刷新列表
      this.$refs['tobeReadListTable'].load(this.searchForm)
    },
    reset() {
      this.$refs['modelForm'].resetFields()
      this.search()
    },
    updateToReaded(params) {
      if (params.isRead !== 0) return
      updateToReaded({
        id: params.id
      })
        .then(res => this.search())
        .catch(err => {})
    }
  }
}
</script>
